<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="menu">
        <img src="images/menu1.png" alt="">
        <img src="images/menu2.png" alt="">
        <img src="images/menu3.png" alt="">
        <img src="images/menu4.png" alt="">
        <a href="#menu-tiaozhuan"><img src="images/menu5.png" alt=""></a>
    </div>
    <div id="menu-tiaozhuan">
        <div> 
            <img class="toptp" src="images/01.jpg" alt="">
            <div class="shouye">
                <div class="shouye-c">
                    <div class="shouye-left">
                        <span><a href="#">小米商城</a></span>
                        <span>|</span>
                        <span><a href="#">MIUI</a></span>
                        <span>|</span>
                        <span><a href="#">IoT</a></span>
                        <span>|</span>
                        <span><a href="#">云服务</a></span>
                        <span>|</span>
                        <span><a href="#">金融</a></span>
                        <span>|</span>
                        <span><a href="#">有品</a></span>
                        <span>|</span>
                        <span><a href="#">小爱开放平台</a></span>
                        <span>|</span>
                        <span><a href="#">企业团购</a></span>
                        <span>|</span>
                        <span><a href="#">资质证照</a></span>
                        <span>|</span>
                        <span><a href="#">协议规则</a></span>
                        <span>|</span>
                        <span><a href="#">下载app</a></span>
                        <span>|</span>
                        <span><a href="#">智能生活</a></span>
                        <span>|</span>
                        <span><a href="#">Select Location</a></span>
                    </div>
                    <div class="shouye-right">
                        <span><button>登陆</button></span>
                        <span>|</span>
                        <span><button>注册</button></span>
                        <span>|</span>
                        <span><button>消息通知</button></span>
                        <span>|</span>
                        <span><img src="images/gouwuche.png" alt=""></span>
                        <span><button class="gouwuche">购物车</button></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="qian">
        <div class="content1">
            <div class="sousuo">
                <div class="sousuo-left">
                    <img src="images/mi-logo.png" alt="">
                </div>
                <div class="sousuoright">
                    <div class="sousuo-center">
                        <span><a href="#">小米手机</a></span>
                        <span><a href="#">Redmi红米</a></span>
                        <span><a href="#">电视</a></span>
                        <span><a href="#">笔记本</a></span>
                        <span><a href="#">家电</a></span>
                        <span><a href="#">路由器</a></span>
                        <span><a href="#">智能硬件</a></span>
                        <span><a href="#">服务</a></span>
                        <span><a href="#">社区</a></span>
                    </div>
                    <div class="sousuo-right">
                        <div class="sousuo-right-c">
                            <span><input type="text"></span>
                            <span><button></button></span>
                        </div>
                        
                    </div>
                </div>
                
            </div>
            <div class="tpgundong">
                <div class="swiper">
                    <div class="swiper-content">
                        <img src="images/02.jpg" alt="">
                        <img src="images/03.jpg" alt="">
                        <img src="images/04.jpg" alt="">
                        <img src="images/05.jpg" alt="">
                        <img src="images/06.jpg" alt="">
                    </div>
                    <button id="prev"></button>
                    <button id="next"></button>
                    <div id="btns">
                        <span class="current"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="gundong-left">
                    <table class="table">
                        <tr>
                            <td>手机 电话卡</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>电视 盒子</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>笔记本 显示器</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>家电 插线板</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>出行 穿戴</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>智能 路由器</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>电源 配件</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>健康 儿童</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>耳机 音箱</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                        <tr>
                            <td>生活 箱包</td>
                            <td><img src="images/you.png" alt=""></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="select">
                <div class="select1">
                    <div class="select11">
                        <div class="fr1">
                            <div class="fr1-t">
                                <img class="image" src="images/shizhong.png" alt="">
                            </div>
                            <div class="fr1-b">
                                <a href="#">小米秒杀</a>
                            </div>
                            
                        </div>
                        <div class="fr2">
                            <div class="fr2-t">
                                <img  class="image" src="images/qiye.png" alt="">
                            </div>
                            <div class="fr2-b">
                                <a href="#">企业团购</a>
                            </div>
                        </div>
                        <div class="s-t">
                            <div class="s-t1">
                                <img  class="image" src="images/F.png" alt="">
                            </div>
                            <div class="s-t2">
                                <a href="#">F码通道</a>
                            </div>
                        </div>
                    </div>
                    <div class="select12">
                        <div class="fr3">
                            <div class="fr3-t">
                                <img  class="image" src="images/ka.png" alt="">
                            </div>
                            <div class="fr3-b">
                                <a href="#">米粉卡</a>
                            </div>
                        </div>
                        <div class="fr4">
                            <div class="fr4-t">
                                <img   class="image" src="images/d2.png" alt="">
                            </div>
                            <div class="fr4-b">
                                <a href="#">以旧换新</a>
                            </div>
                        </div>
                        <div class="s-b">
                            <div class="sb-t">
                                <img class="image" src="images/d1.png" alt="">
                            </div>
                            <div class="sb-b">
                                <a href="#">话费充值</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="select2">
                    <img src="images/08.jpg" alt="">
                </div>
                <div class="select3">
                    <img src="images/09.jpg" alt="">
                </div>
                <div class="select4">
                    <img src="images/10.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="hou">
        <div class="content2">
            <div class="shangou">
                <p>小米闪购</p>
                <div class="shangou-content">
                    <div class="daojishi">
                        <div class="djs">
                            <p class="djsp1">20:00场</p>
                            <img src="images/shandian.png" alt="">
                            <p class="djsp2">距离结束还有</p>
                            <span><i>00</i></span>
                            <span>:</span>
                            <span><i>31</i></span>
                            <span>:</span>
                            <span><i>30</i></span>
                        </div>
                    </div>
                    <div class="daojishi2">
                        <div class="y1">
                            <img src="images/12.jpg" alt="">
                            <div class="i1">
                                <p class="p1">小米有线耳机（K歌版）白色</p>
                                <p class="p2">我的私人ktv</p>
                                <span class="span1">149元</span>
                                <span class="span2">169元</span>
                            </div>
                            
                        </div>
                        <div class="y2">
                            <img src="images/xmsh.webp" alt="">
                            <div class="i2">
                                <p class="p1">小米手表 Color 典雅黑</p>
                                <p class="p2">1540种出彩搭配，潮我看齐</p>
                                <span class="span1">599元</span>
                                <span class="span2">799元</span>
                            </div>
                           
                        </div>
                        <div class="y3">
                            <img src="images/kt.jpg" alt="">
                            <div class="i3">
                                <p class="p1">米家互联网空调 1.5匹</p>
                                <p class="p2">变频，快速制冷热</p>
                                <span class="span1">1899元</span>
                                <span class="span2">2299元</span>
                            </div>
                            
                        </div>
                        <div class="shangou4">
                            <img src="images/14.jpg" alt="">
                            <div class="i4">
                                <p class="p1">日常元素抽纸 青春版 24包/箱</p>
                                <p class="p2">精选原生竹浆，健康环保</p>
                                <span class="span1">27.9元</span>
                                <span class="span2">32.9元</span>
                            </div>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="shouji">
                <div class="fanren">
                    <img class="xiaomishouji" src="images/z1.JPG" alt="">
                </div>
                
                <p class="shoujip">手机</p>
                <div class="shouji-content">
                    <div class="shouji-content-left"><img src="images/z2.JPG" alt=""></div>
                    <div class="shouji-content-right">
                        <div class="sjcontent1">
                            <div>
                                <img src="images/z3.JPG" alt="">
                                <div class="sj1">
                                    <p class="sjp1">小米10 至尊版</p>
                                    <p class="sjp2">120X 变焦/120W秒充/120Hz屏幕</p>
                                    <p class="sjp3">5299元起</p>
                                </div>
                            </div>
                            <div>
                                <img src="images/z4.JPG" alt="">
                                <div class="sj2">
                                    <p class="sjp1">Redmi k30至尊版</p>
                                    <p class="sjp2">120Hz弹出全面屏，天玑1000+旗舰处</p>
                                    <p class="sjp3">1999元起</p>
                                </div>
                            </div>
                            <div>
                                <img src="images/z5.JPG" alt="">
                                <div class="sj3">
                                    <p class="sjp1">腾讯黑鲨3S</p>
                                    <p class="sjp2">骁龙865处理器，120Hz刷新率</p>
                                    <p class="sjp3">3999元起</p>
                                </div>
                            </div>
                            <div class="sj13">
                                <img src="images/z6.JPG" alt="">
                                <div class="sj7">
                                    <p class="sjp1">Redmi 9A</p>
                                    <p class="sjp2">5000mAh长循环大电量，6.53“超大护</p>
                                    <p class="sjp3">599元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="sjcontent2">
                            <div>
                                <img src="images/z7.JPG" alt="">
                                <div class="sj4">
                                    <p class="sjp1">小米10 青春版 5G</p>
                                    <p class="sjp2">50倍潜望式变焦/轻薄5G手机</p>
                                    <span class="sjp3">1899元起</span>
                                    <span class="sjp4">2099元</span>
                                </div>
                            </div>
                            <div>
                                <img src="images/z8.JPG" alt="">
                                <div class="sj5">
                                    <p class="sjp1">小米10</p>
                                    <p class="sjp2">骁龙865/1亿像素相机</p>
                                    <span class="sjp3">3799元起</span>
                                    <span class="sjp4">3999元</span>
                                </div>
                            </div>
                            <div>
                                <img src="images/z9.JPG" alt="">
                                <div class="sj6">
                                    <p class="sjp1">Redmi K30 Pro</p>
                                    <p class="sjp2">双模5G，骁龙865，弹出全面屏</p>
                                    <span class="sjp3">2699元起</span>
                                    <span class="sjp4">3399元</span>
                                </div>
                            </div>
                            <div class="sj23">
                                <img src="images/z10.JPG" alt="">
                                <div class="sj8">
                                    <p class="sjp1">Redmi K30 Pro</p>
                                    <p class="sjp2">双模5G，骁龙865，弹出全面屏</p>
                                    <p class="sjp3">3399元起</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shipin">
                <p class="shipintitle">视频</p>
                <div>
                    <div class="sptop"><img src="images/sp1.webp" alt=""></div>
                    <div class="spbottom">
                        <p class="spb1">Redmi 10X系列发布会</p>
                        <p class="spb2">Redmi 10X系列发布会</p>
                    </div>
                </div>
                <div>
                    <div class="sptop"><img src="images/sp2.webp" alt=""></div>
                    <div class="spbottom">
                        <p class="spb1">小米10 青春版 发布会</p>
                    </div>
                </div>
                <div>
                    <div class="sptop"><img src="images/sp3.webp" alt=""></div>
                    <div class="spbottom">
                        <p class="spb1">小米10 8K手机拍大片</p>
                    </div>
                </div>
                <div class="shipin4">
                    <div class="sptop"><img src="images/sp4.webp" alt=""></div>
                    <div class="spbottom">
                        <p class="spb1">小米10发布会</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="last">
        <div class="content3">
            <div class="shang">
                <div>
                    <img src="images/weixiu.png" alt="">
                    <span>预约维修服务</span>
                </div>
                <div>
                    <img src="images/7tian.png" alt="">
                    <span>七天无理由退货</span>
                </div>
                <div>
                    <img src="images/15tian.png" alt="">
                    <span>15天免费换货</span>
                </div>
                <div>
                    <img src="images/liwu.png" alt="">
                    <span>满99元包邮</span>
                </div>
                <div class="zuihouyige">
                    <img src="images/dingw.png" alt="">
                    <span>520余家售后网点</span>
                </div>
            </div>
            <div class="xia">
                <div class="xz">
                    <div class="xzz">
                        <div>
                            <ul>
                                <li id="li1">帮助中心</li>
                                <li>售后政策</li>
                                <li>自助服务</li>
                                <li>相关下载</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li id="li1">服务支持</li>
                                <li>售后政策</li>
                                <li>自助服务</li>
                                <li>相关下载</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li id="li1">线下门店</li>
                                <li>小米之家</li>
                                <li>服务网点</li>
                                <li>授权体验店</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li id="li1">关于小米</li>
                                <li>了解小米</li>
                                <li>加入小米</li>
                                <li>投资者关系</li>
                                <li>企业社会责任</li>
                                <li>廉洁举报</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li id="li1">关注我们</li>
                                <li>新浪微博</li>
                                <li>官方微信</li>
                                <li>联系我们</li>
                                <li>公益基金会</li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li id="li1">特色服务</li>
                                <li>F 码通道</li>
                                <li>礼物码</li>
                                <li>防伪查询</li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                <div class="xy">
                    <div class="xyl">
                        <p class="xyp1">400-100-5678</p>
                        <p class="xyp2">8:00-18:00（仅收市话费）</p>
                        <button>人工客服</button>
                        <br>
                        <span class="gzxm">关注小米：</span>
                        <span><img class="wb" src="images/wb.png" alt=""></span>
                        <span><img class="wx" src="images/wx.png" alt=""></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="content4">
            <div id="left"><img src="images/mi-logo.png" alt=""></div>
            <div id="right">
                <span><a href="#">小米商城</a></span>
                <span>|</span>
                <span><a href="#">MIUI</a></span>
                <span>|</span>
                <span><a href="#">米家</a></span>
                <span>|</span>
                <span><a href="#">米聊</a></span>
                <span>|</span>
                <span><a href="#">多看</a></span>
                <span>|</span>
                <span><a href="#">游戏</a></span>
                <span>|</span>
                <span><a href="#">小米天猫店</a></span>
                <span>|</span>
                <span><a href="#">小米集团隐私政策</a></span>
                <span>|</span>
                <span><a href="#">小米公司儿童信息保护规则</a></span>
                <span>|</span>
                <span><a href="#">小米商城隐私政策</a></span>
                <span>|</span>
                <span><a href="#">小米商城用户协议</a></span>
                <span>|</span>
                <span><a href="#">问题反馈</a></span>
                <span>|</span>
                <span><a href="#">Select Location</a></span>
                <p>@mi.com 京ICP证110507号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备 食品经营许可证</p>
                <p>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <span><img class="tupian" src="images/1111.png" alt=""></span>
                <span><img class="tupian" src="images/2222.png" alt=""></span>
                <span><img class="tupian" src="images/3333.png" alt=""></span>
                <span><img class="tupian" src="images/4444.png" alt=""></span>
                <span><img class="image" src="images/5555.png" alt=""></span>
                
            </div>
        </div>
        <div id="jiewei">
            <p>让全球每个人都能享受科技带来的美好生活</p>
        </div>
    </div>
    <script>
        // 封装:就是一段重复的代码写成函数
        let index = 0;
        $("#next").click(function () {
            index++;
            console.log(index)
            if (index > 4) {
                index = 0;
            }
            animate(1000)
        })
        
        $("#prev").click(function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            animate(1000)
        })
        // 点击焦点让对应的下标值的图片显示,重置下标值
        $("#btns span").click(function(){
            index = $(this).index();
            // $(".swiper-content img").eq(index).fadeIn().siblings().fadeOut()
            // $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
            animate(1000)
        })
        function animate(speed) {
            $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed)
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        }
    </script>
</body>
</html>